<template>
  <div id="add_template" class="menu-set">
    <fieldset class="layui-elem-field layui-field-title">
      <legend>活动模块</legend>
      <div class="layui-field-box">
        <ul class="clearfix">
          <li v-for="(item,index) in showalist" :key="index" v-if="pageconfig[pageconfig.theme].layout!='one'||item.id!='MyTicket'">
            <div class="addmod" v-on:click="addthismod(item.id,index,item.type)" :class="{alerdyadd:item.alerdyadd}">
              <div class="iconBox">
                <i :class="['iconfont',item.defaultIcon]"></i>
              </div>
              <div class="name">{{item.name}}</div>
            </div>
          </li>
        </ul>
      </div>
    </fieldset>
    <fieldset class="layui-elem-field layui-field-title">
      <legend>个人管家模块</legend>
      <div class="layui-field-box">
        <ul class="clearfix">
          <li v-for="(item,index) in showclist" :key="index">
            <div class="addmod" v-on:click="addthismod(item.id,index,item.type)" :class="{alerdyadd:item.alerdyadd}">
              <div class="iconBox">
                <i :class="['iconfont',item.defaultIcon]"></i>
              </div>
              <div class="name">{{item.name}}</div>
            </div>
          </li>
        </ul>
      </div>
    </fieldset>
    <fieldset class="layui-elem-field layui-field-title">
      <legend>基本模块</legend>
      <div class="layui-field-box">
        <ul class="clearfix">
          <li v-for="(item,index) in BasicModList" :key="index" v-if="pageconfig[pageconfig.theme].layout!='one'||item.id!='LinkMod'">
            <div class="addmod" v-on:click="addthismod(item.id,index,item.type)" :class="{alerdyadd:item.alerdyadd}">
              <div class="iconBox">
                <i :class="['iconfont',item.defaultIcon]"></i>
              </div>
              <div class="name">{{item.name}}</div>
            </div>
          </li>
        </ul>
      </div>
    </fieldset>
  </div>
</template>

<script>
  export default {
    props: ["moddata", "pageconfig", "blist", "alist", "clist"],
    data() {
      return {
        activeModList: this.alist,
        BasicModList: this.blist,
        CustomModule: this.clist
      }
    },
    mounted() {},
    computed: {
      showalist: function () {
        var that = this;
        for (var i = 0; i < that.activeModList.length; i++) {
          that.activeModList[i].alerdyadd = false;
          for (var j = 0; j < that.moddata.length; j++) {
            if (that.activeModList[i].id == that.moddata[j].id) {
              that.activeModList[i].alerdyadd = true;
            }
          }
        }
        return this.activeModList
      },
      showclist: function () {
        var that = this;
        for (var i = 0; i < that.CustomModule.length; i++) {
          that.CustomModule[i].alerdyadd = false;
          if (!that.CustomModule[i].repeatadd) {
            for (var j = 0; j < that.moddata.length; j++) {
              if (that.CustomModule[i].id == that.moddata[j].id) {
                that.CustomModule[i].alerdyadd = true;
              }
            }
          }
        }
        return this.CustomModule
      }
    },
    methods: {
      addthismod: function (id, index, type) {
        this.$emit("addmod", id, index, type);
      }
    }
  }
</script>

<style scoped>
  .iconBox {
    text-align: center;
    padding: 9px 0 6px;
  }

  .name {
    text-align: center;
  }

  .iconfont {
    font-size: 35px;
  }
</style>